<template>
    <n-card :bordered="false" class="rounded-8px shadow-sm">
        <div class="flex-y-center justify-between">
            <div class="flex-y-center">
                <icon-local-avatar class="text-70px" />
                <div class="pl-12px">
                    <h3 class="text-18px font-semibold">
                        早安，{{ auth?.userInfo?.username }}, 今天又是充满活力的一天！
                    </h3>
                    <p class="leading-30px text-#999">今日多云转晴，20℃ - 25℃！</p>
                </div>
            </div>
            <n-space :size="24" :wrap="false">
                <n-statistic
                    v-for="item in statisticData"
                    :key="item.id"
                    class="whitespace-nowrap"
                    v-bind="item"
                ></n-statistic>
            </n-space>
        </div>
    </n-card>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/store'
import {onMounted, ref} from "vue";
import {JBoltApi} from "@/utils";
import {ResData} from "@/typings/request";

defineOptions({ name: 'DashboardWorkbenchHeader' })

const auth = useAuthStore()

interface StatisticData {
    id: number
    label: string
    value: string
}

const statisticData = ref<StatisticData[]>([
    {
        id: 0,
        label: '项目数',
        value: '0'
    },
    {
        id: 1,
        label: '通知',
        value: '0'
    },
    {
        id: 2,
        label: '待办',
        value: '0'
    }
])

function loadData() {
    JBoltApi.get<ResData>(
        '/api/admin/app/datas'
    ).then(res=>{
        statisticData.value[0].value = res.result.data.totalRow
    })
    JBoltApi.get<ResData>(
        '/api/admin/msgCenter/sysNoticePortalDatas'
    ).then(res=>{
       statisticData.value[1].value = res.result.data.length
    })
    JBoltApi.get<ResData>(
        '/api/admin/msgCenter/todoPortalDatas'
    ).then(res=>{
        statisticData.value[2].value = res.result.data.length
    })
}

onMounted(()=>{
    loadData()
})
</script>

<style scoped></style>
